<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();
const props = defineProps({
  article: {
    type: Object,
    required: true
  }
});

const goToDetail = () => {
  router.push({
    name: 'ArticleDetail',
    params: { id: props.article.id }
  });
};
</script>

<template>
  <div class="article-card-horizontal" @click="goToDetail">
    <div class="article-content">
      <h3 class="article-title">{{ article.title }}</h3>
      <div class="article-info">
        <div class="article-meta">
          <span class="meta-item">{{ article.date }}</span>
          <span class="meta-item">{{ article.author }}</span>
          <span class="meta-item">{{ article.category }}</span>
        </div>
        <div class="article-stats">
          <span class="stat-item">
            <i class="icon-eye"></i>
            {{ article.views }} 浏览
          </span>
          <span class="stat-item">
            <i class="icon-like"></i>
            {{ article.likes }} 喜欢
          </span>
          <span class="stat-item">
            <i class="icon-comment"></i>
            {{ article.comments }} 评论
          </span>
        </div>
      </div>
    </div>
    <div class="article-cover">
      <img :src="article.cover" :alt="article.title">
    </div>
  </div>
</template>

<style lang="less" scoped>
.article-card-horizontal {
  display: flex;
  justify-content: space-between;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  transition: transform 0.3s;
  cursor: pointer;

  &:hover {
    transform: translateY(-5px);
  }

  .article-content {
    flex: 1;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .article-title {
      font-size: 1.4rem;
      color: #333;
      margin-bottom: 1rem;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .article-info {
      .article-meta {
        display: flex;
        gap: 1rem;
        margin-bottom: 1rem;
        
        .meta-item {
          color: #999;
          font-size: 0.9rem;
        }
      }

      .article-stats {
        display: flex;
        gap: 1rem;
        
        .stat-item {
          color: #999;
          font-size: 0.9rem;
          display: flex;
          align-items: center;
          gap: 0.3rem;
        }
      }
    }
  }

  .article-cover {
    width: 280px;
    height: 200px;
    
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}
</style> 